<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="A ChatRoom based on React Node Antd">
    <meta name="keywords" content="react node socket.io chat web demo 聊天室 BB">
    <meta name="author" content="BB">
    <title>肥宅の圣地</title>
    <link rel="shortcut icon" href="http://cdn.algbb.fun/ImageMessages/BB_1547810884814_width_32_height_32_" type="image/x-icon"/>
    <style>body {
        background: -webkit-linear-gradient(left top, red, #00f);
        background: -o-linear-gradient(bottom right, red, #00f);
        background: -moz-linear-gradient(bottom right, red, #00f);
        background: linear-gradient(to bottom right, #fa4b2a, #1faaff) no-repeat;
        background-size: cover;
        background-attachment: fixed
    }</style>
    <style>@-webkit-keyframes rotate-pacman-half-up {
               0% {
                   -webkit-transform: rotate(270deg);
                   transform: rotate(270deg)
               }
               50% {
                   -webkit-transform: rotate(360deg);
                   transform: rotate(360deg)
               }
               100% {
                   -webkit-transform: rotate(270deg);
                   transform: rotate(270deg)
               }
           }

    @keyframes rotate-pacman-half-up {
        0% {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
        50% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
        }
        100% {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg)
        }
    }

    @-webkit-keyframes rotate-pacman-half-down {
        0% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
        50% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }
        100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
    }

    @keyframes rotate-pacman-half-down {
        0% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
        50% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
        }
        100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg)
        }
    }

    @keyframes pacman-balls {
        0% {
            opacity: .5
        }
        25% {
            opacity: 1
        }
        50% {
            opacity: .5
        }
        75% {
            opacity: 1
        }
        100% {
            opacity: .5;
            -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px)
        }
    }

    .loader {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 25%;
        max-width: 82%;
        height: 200px;
        align-items: center;
        justify-content: center;
        margin-top: 100px
    }

    .pacman {
        position: relative
    }

    .pacman > div:nth-child(3) {
        -webkit-animation: pacman-balls 1s .33s infinite linear;
        animation: pacman-balls 1s .99s infinite linear
    }

    .pacman > div:nth-child(4) {
        -webkit-animation: pacman-balls 1s .66s infinite linear;
        animation: pacman-balls 1s 1.32s infinite linear
    }

    .pacman > div:nth-child(5) {
        -webkit-animation: pacman-balls 1s .99s infinite linear;
        animation: pacman-balls 1s 1.65s infinite linear
    }

    .pacman > div:nth-child(6) {
        -webkit-animation: pacman-balls 1s .99s infinite linear;
        animation: pacman-balls 1s 0ms infinite linear
    }

    .pacman > div:nth-child(7) {
        -webkit-animation: pacman-balls 1s .99s infinite linear;
        animation: pacman-balls 1s .33s infinite linear
    }

    .pacman > div:nth-child(8) {
        -webkit-animation: pacman-balls 1s .99s infinite linear;
        animation: pacman-balls 1s .66s infinite linear
    }

    .pacman > div:first-of-type {
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-top: 50px solid #fff;
        border-left: 50px solid #fff;
        border-bottom: 50px solid #fff;
        border-radius: 50px;
        -webkit-animation: rotate-pacman-half-up .5s 0s infinite;
        animation: rotate-pacman-half-up .5s 0s infinite
    }

    .pacman > div:nth-child(2) {
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-top: 50px solid #fff;
        border-left: 50px solid #fff;
        border-bottom: 50px solid #fff;
        border-radius: 50px;
        -webkit-animation: rotate-pacman-half-down .5s 0s infinite;
        animation: rotate-pacman-half-down .5s 0s infinite;
        margin-top: -100px
    }

    .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5) {
        background-color: #fff;
        opacity: 0;
        border-radius: 100%;
        margin: 2px;
        width: 13px;
        height: 13px;
        position: absolute;
        -webkit-transform: translate(0, -6.25px);
        -ms-transform: translate(0, -6.25px);
        transform: translate(0, -6.25px);
        top: 50px;
        left: 150px
    }

    .pacman > div:nth-child(6), .pacman > div:nth-child(7), .pacman > div:nth-child(8) {
        background-color: #fff;
        opacity: 0;
        border-radius: 100%;
        margin: 2px;
        width: 13px;
        height: 13px;
        position: absolute;
        -webkit-transform: translate(0, -6.25px);
        -ms-transform: translate(0, -6.25px);
        transform: translate(0, -6.25px);
        top: 50px;
        left: 250px
    }</style>
    <style>#preloader-4 {
        display: flex;
        flex: 0 1 auto;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 25%;
        max-width: 95%;
        align-items: center;
        justify-content: center;
        margin-top: 100px
    }

    #preloader-4 span {
        text-align: center;
        line-height: 40px;
        float: left;
        width: 40px;
        height: 40px;
        background: 0 0;
        opacity: 0;
        color: #0d264b;
        border-radius: 20px;
        -webkit-animation: preloader-4 3.6s infinite ease-in-out;
        -moz-animation: preloader-4 3.6s infinite ease-in-out;
        -ms-animation: preloader-4 3.6s infinite ease-in-out;
        animation: preloader-4 2.8s infinite ease-in-out
    }

    #preloader-4 span:nth-child(2) {
        left: 40px;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -ms-animation-delay: .4s;
        animation-delay: .4s
    }

    #preloader-4 span:nth-child(3) {
        left: 80px;
        -webkit-animation-delay: .8s;
        -moz-animation-delay: .8s;
        -ms-animation-delay: .8s;
        animation-delay: .8s
    }

    #preloader-4 span:nth-child(4) {
        left: 120px;
        -webkit-animation-delay: 1.2s;
        -moz-animation-delay: 1.2s;
        -ms-animation-delay: 1.2s;
        animation-delay: 1.2s
    }

    #preloader-4 span:nth-child(5) {
        left: 160px;
        -webkit-animation-delay: 1.6s;
        -moz-animation-delay: 1.6s;
        -ms-animation-delay: 1.6s;
        animation-delay: 1.6s
    }

    #preloader-4 span:nth-child(6) {
        left: 200px;
        -webkit-animation-delay: 2s;
        -moz-animation-delay: 2s;
        -ms-animation-delay: 2s;
        animation-delay: 2s
    }

    #preloader-4 span:nth-child(7) {
        left: 240px;
        -webkit-animation-delay: 2.4s;
        -moz-animation-delay: 2.4s;
        -ms-animation-delay: 2.4s;
        animation-delay: 2.4s
    }

    #preloader-4 span:nth-child(8) {
        left: 280px;
        -webkit-animation-delay: 2.8s;
        -moz-animation-delay: 2.8s;
        -ms-animation-delay: 2.8s;
        animation-delay: 2.8s
    }

    #preloader-4 span:nth-child(9) {
        left: 320px;
        -webkit-animation-delay: 3.2s;
        -moz-animation-delay: 3.2s;
        -ms-animation-delay: 3.2s;
        animation-delay: 3.2s
    }

    #preloader-4 span:nth-child(10) {
        left: 360px;
        -webkit-animation-delay: 3.6s;
        -moz-animation-delay: 3.6s;
        -ms-animation-delay: 3.6s;
        animation-delay: 3.6s
    }

    @-webkit-keyframes preloader-4 {
        0% {
            opacity: .3;
            -webkit-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
        50% {
            opacity: .6;
            -webkit-transform: translateY(-10px);
            background: #fff;
            box-shadow: 0 20px 3px rgba(0, 0, 0, .05)
        }
        100% {
            opacity: .3;
            -webkit-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
    }

    @-moz-keyframes preloader-4 {
        0% {
            opacity: .3;
            -moz-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
        50% {
            opacity: 1;
            -moz-transform: translateY(-10px);
            background: #fff;
            box-shadow: 0 20px 3px rgba(0, 0, 0, .05)
        }
        100% {
            opacity: .3;
            -moz-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
    }

    @-ms-keyframes preloader-4 {
        0% {
            opacity: .3;
            -ms-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
        50% {
            opacity: 1;
            -ms-transform: translateY(-10px);
            background: #fff;
            box-shadow: 0 20px 3px rgba(0, 0, 0, .05)
        }
        100% {
            opacity: .3;
            -ms-transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
    }

    @keyframes preloader-4 {
        0% {
            opacity: 0;
            transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
        50% {
            opacity: 1;
            transform: translateY(-10px);
            background: #fff;
            box-shadow: 0 20px 3px rgba(0, 0, 0, .05)
        }
        100% {
            opacity: 0;
            transform: translateY(0);
            box-shadow: 0 0 3px rgba(0, 0, 0, .1)
        }
    }</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
    <div class="loader">
        <div style="opacity:.8" class="pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id="preloader-4"><span>首</span> <span>次</span> <span>加</span> <span>载</span> <span>需</span> <span>要</span>
        <span>少</span> <span>许</span> <span>时</span> <span>间</span></div>
</div>

</body>
</html>
